<template>  
		<!-- 内容区 -->
		<div class="content myClear">
			<!-- 内容区-上传图片 --> 
			<div class="step1">
				<img src="../../assets/img/accompanyPlay/zhuBO.jpg"/>
				<div class="uploadFileDiv">
					<h3>示例图片</h3>
					<p>jpg或png格式（不支持gif格式），最大不超过3M</p>
					<div class="uploadFile">
						<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,video/mp4" ref="avatarInput2" @change="uploadVisualImg($event)"/>
						<span>上传照片</span>	
					</div>					          		
				</div>	          		          
			</div>
			<!-- 相册展示部分 -->
			<div class="step2">
				<ul>
					<li v-for="(val,index) in photoArr" :key="index" @mouseover="val.status!=3 ? val.isShowSetting=true:''" @mouseout="val.isShowSetting=false">						
						<div class="setting" v-if="val.isShowSetting==true">						
							<p @click="setbgImg(val.id)">设为封面</p>
							<p @click="dropPhoto(val.id)">删除</p> 
						</div>
						<img :src="$imgPath(val.file.url)" alt="">
						<div class="hint" v-if="val.status==3">封面</div>
					</li>										
				</ul>
			</div>
		</div>		                    			    
</template>
<script>
import apiHttp from '../../api/index'
export default {
    data(){
        return{		
            files:[],        
			fileId:'',
			photoArr:[]            
        }
	},
    created(){
        this.getUserImg()
    },
    methods:{
		//获取用户相册信息
		getUserImg(){     
			let arr = []     
            apiHttp.apiCenter.getUserImgme('',resp=>{                         
                if(resp.code==200){					 
					for(var i=0;i<resp.data.content.length;i++){
						resp.data.content[i].isShowSetting = false
						arr.push(resp.data.content[i])
					} 
					this.photoArr = arr
					/* this.photoArr = resp.data.content;
					this.photoArr.forEach(h=>{
						this.$set(h,'isShowSetting',false);
					})  */                
                }                
            })
        }, 
		 //上传形象照/视频
        uploadVisualImg(event){				
			if(this.photoArr.length==6){				
				this.$Message.warning("最多上传6张");
				return
			}
            let fd = new FormData()
            fd.append('model','user/photo')
            if (this.$refs.avatarInput2.files.length !== 0) {
                fd.append('file', this.$refs.avatarInput2.files[0])
            }
            apiHttp.apiCenter.uploadImg(fd,resp=>{
                if(resp.code == 200){
                    this.files.push(resp.data.fileId)
                    this.fileId = resp.data.fileId
                    apiHttp.apiCenter.addUserImg(this.fileId,'',resp=>{                       
                        if(resp.code==200){
							this.getUserImg()
							this.$Message.success('上传成功') 
                        }
                    }) 
                }               
            })
        },
        //删除相册
        dropPhoto(id){
            apiHttp.apiCenter.deleteUserImg(id,'',resp=>{      
                if(resp.code == 200){
					this.getUserImg()     
					this.$Message.success('删除成功')                   
                }
            })
        },
        //设为展示页
        setbgImg(id){
            apiHttp.apiCenter.setUserImg(id,'',resp=>{                              
                if(resp.code == 200){
					this.getUserImg()
					this.$Message.success('设置成功')                  
                }
            })
        },
    }
}
</script>
<style scoped>
    .myClear{
		clear: both;
	}
	.content{
		padding-top: 2%;
		padding-left: 40px;
	}
	/*上传相册部分*/
	.content .step1{
		width: 40%;
		text-align: center;
	}
	.step1>img{
		width: 160px;
		height: 240px;
		border-radius: 12px;
	}
	.step1 .uploadFileDiv>h3{		
	  margin: 3% 0px 2% 0px;
	  font-size: 20px;
	  color: #666666;
	}
	.step1 .uploadFile{
        position: relative;
		width: 26%;
		height: 46px;	
		border: 1px solid #D84E4D;
		border-radius: 10px;
		margin:5% auto;
		text-align: center;
		color: #D84E4D;
		line-height: 44px;
		font-size: 16px;
	}
	.step1 .uploadFile>input{				
		position: absolute;
    	left: 0;
    	top: 0;
    	width: 100%;
    	height: 100%;
    	border: none;
    	background: none;
    	z-index: 99;
    	opacity: 0;
	}
	.step1 .uploadFileDiv>p{
		margin-bottom: 10%;		
		font-size: 14px;
		 color: #cccccc;
	}
	/* 相册展示部分 */
	.content .step2{
		margin-top: 50px;
	}
	.content .step2 ul{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.content .step2 ul>li>img{
		width: 160px;
		height: 240px;
		border-radius: 12px;
	}
	.content .step2 ul>li{
		margin-right: 30px;
		position: relative;
	}
	.content .step2 ul>li .hint{
		position: absolute;
		bottom: 4px;
		right: 0px;
		width: 88px;
		height: 24px;
		border-radius: 10px;
		background-color: #D84E4D;
		color: #ffffff;
		text-align: center;
		line-height: 24px;
		font-size: 16px;
	}
	.content .step2 ul>li .setting{
		position: absolute;
		top: 0;
		left: 0;
		width: 160px;
		height: 240px;
		border-radius: 12px;
		background-color: #D84E4D;
		opacity: 0.6;
		z-index: 98;
		color: #D84E4D;
		text-align: center;
	}
	.content .step2 ul>li .setting>p{
		position: relative;
		top: 40%;
		left: 26%;
		margin-bottom: 10px;
		width: 88px;
		height: 30px;
		background-color: #ffffff;
		text-align: center;
		line-height: 30px;
		font-size: 14px;
		border-radius: 12px;
		z-index: 99;
	}
</style>

